<!-- 设计器应用 -->
<template>
  <div id="example-formDesign" v-loading="loading">
    <bm-form-design
      ref="bmFormDeaign"
      :headers="token"
      :dicKeyVal="dicKeyVal"
      @handlerUploadJson="handlerUploadJson"
      @handlerChoiseConfig="handlerChoiseConfig"
    ></bm-form-design>
    <!-- Dialog -->
    <el-dialog title="选择模板" :visible.sync="getConfigDialog" width="60%">
      <el-row>
        <el-col :span="6">
          <el-input
            placeholder="输入节点名称进行过滤"
            v-model="filterText"
          ></el-input>
          <div style="max-height: 50vh; overflow-y: auto; margin-top: 10px">
            <el-tree
              ref="tree"
              :data="tableData"
              :props="defaultProps"
              accordion
              :filter-node-method="filterNode"
              @node-click="handlerNodeClick"
            ></el-tree>
          </div>
        </el-col>
        <el-col :span="16" :offset="1">
          <h3>选中项</h3>
          <el-table :data="configOption">
            <el-table-column
              prop="formType"
              label="类别"
              align="center"
              width="130"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.formType == '2'">模版</el-tag>
                <el-tag v-else type="info">流程</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="mgrOrBiz"
              label="平台"
              align="center"
              width="110"
            ></el-table-column>
            <el-table-column
              prop="formName"
              label="流程名称"
              align="center"
              min-width="180"
            ></el-table-column>
            <el-table-column
              prop="appId"
              label="流程ID"
              align="center"
              width="130"
            ></el-table-column>
            <el-table-column
              prop="nodeName"
              label="节点名称"
              align="center"
              width="130"
            ></el-table-column>
            <el-table-column
              prop="nodeId"
              label="节点ID"
              align="center"
              min-width="180"
            ></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="handlerDetail">删 除</el-button>
        <el-button type="primary" @click="handlerGetConfig">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="上传模板" :visible.sync="uploadDialog" width="40%">
      <el-row>
        <el-col :span="6">
          <h3>选择节点</h3>
          <el-input
            placeholder="输入节点名称进行过滤"
            v-model="filterText"
          ></el-input>
          <div style="max-height: 50vh; overflow-y: auto; margin-top: 10px">
            <el-tree
              ref="tree"
              :data="tableData"
              :props="defaultProps"
              accordion
              :filter-node-method="filterNode"
              @node-click="handlerNodeClickUpload"
            ></el-tree>
          </div>
        </el-col>
        <el-col :span="16" :offset="1">
          <h3>选中项</h3>
          <el-form
            ref="uploadConfigForm"
            :model="uploadConfig"
            label-position="left"
            label-width="120px"
            label-suffix=":"
          >
            <el-form-item label="类别" prop="formType" :required="true">
              <el-select
                v-model="uploadConfig.formType"
                placeholder="请选择类别"
              >
                <el-option label="流程" :value="'1'"></el-option>
                <el-option label="模板" :value="'2'"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="平台" prop="mgrOrBiz">
              <el-radio-group v-model="uploadConfig.mgrOrBiz">
                <el-radio-button label="mgr"></el-radio-button>
                <el-radio-button label="biz"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="流程名称" prop="formName" :required="true">
              <el-input
                name="formName"
                v-model="uploadConfig.formName"
                placeholder="请输入流程名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="流程ID" prop="appId" :required="true">
              <el-input
                name="appId"
                v-model="uploadConfig.appId"
                placeholder="请输入流程ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="节点名称" prop="nodeName" :required="true">
              <el-input
                name="nodeName"
                v-model="uploadConfig.nodeName"
                placeholder="请输入节点名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="节点ID" prop="nodeId" :required="true">
              <el-input
                name="nodeId"
                v-model="uploadConfig.nodeId"
                placeholder="请输入节点ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="id" prop="id">
              <el-input
                name="id"
                v-model="uploadConfig.id"
                placeholder="相同id会覆盖数据"
              ></el-input>
            </el-form-item>
            <el-form-item label="uuid" prop="uuid">
              <el-input
                name="uuid"
                v-model="uploadConfig.uuid"
                placeholder="uuid"
              ></el-input>
            </el-form-item>
            <el-form-item label="parentId" prop="parentId">
              <el-input
                name="parentId"
                v-model="uploadConfig.parentId"
                placeholder="parentId"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlerUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import request from "@/plugins/axios"; //这里引入自己axios的配置

export default {
  name: "exampleFormDesign",
  computed: {
    token() {
      return {
        "Blade-Auth": "bearer " + Cookies.get("saber-access-token"),
      };
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  data() {
    return {
      loading: false,
      /** 设计器配置 下面基本类型为默认值可不传 */
      dicKeyVal: {
        //字典值key-val名
        label: "dictValue",
        value: "dictKey",
      },
      /** 上传模板 */
      uploadDialog: false,
      getUploadConfig: {},
      uploadConfig: {
        formType: "",
        mgrOrBiz: "",
        formData: {},
        formName: "",
        appId: "",
        nodeName: "",
        nodeId: "",
        id: "",
        uuid: "",
        parentId: "",
      },
      /** 选择模板 */
      filterText: "",
      defaultProps: {
        children: "children",
        label: (data) => {
          return data.nodeName ? data.nodeName : data.formName;
        },
      },
      getConfigDialog: false,
      tableData: [], //数据List
      getConfig: { formType: "", formName: "", nodeName: "" }, //查询信息
      configOption: [], //选中项
    };
  },
  methods: {
    handlerGetTree() {
      //获取模版列表
      this.loading = true;
      this.tableData = [];
      return request
        .post("api/rem-registrationmgrweb/otc-flow/workflowform/tree")
        .then((res, reject) => {
          this.loading = false;
          if (res.data.success) {
            //调整数据
            this.tableData = res.data.data;
          } else {
            reject();
            this.$message.error(res.data.msg);
          }
        })
        .catch(() => {
          this.loading = false;
          this.$message.error("获取失败！");
        });
    },
    /** 选择模板 */
    filterNode(val, data) {
      if (!val) return true;
      return data.formName.indexOf(val) !== -1;
    },
    handlerChoiseConfig() {
      this.handlerGetTree().then(() => {
        this.getConfigDialog = true;
      });
    },
    handlerDetail() {
      //删除节点
      this.$confirm("确定删除吗？", "警告", {
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          let tag = this.configOption[0];
          request({
            method: "post",
            url: "/api/rem-registrationmgrweb/otc-flow/workflowform/remove",
            data: {
              ids: tag.id,
            },
          })
            .then((res) => {
              if (res.data.success) {
                this.$message.success("删除成功！");
                this.configOption = [];
                this.handlerChoiseConfig();
                this.loading = false;
              } else {
                this.loading = false;
                this.$message.error(res.data.msg || "删除失败！");
              }
            })
            .catch(() => {
              this.loading = false;
              this.$message.error("删除失败！");
            });
        })
        .catch(() => {
          this.$message.info("取消删除！");
        });
    },
    handlerNodeClick(data, node) {
      if (node.level != 1) {
        this.configOption = [data];
      }
    },
    handlerGetConfig() {
      //选择模版导入
      this.getConfigDialog = false;
      let data = this.configOption[0];
      if (data.formData) {
        //基本信息的带入
        this.getConfigDialog = false;
        this.uploadConfig.formType = data.formType;
        this.uploadConfig.mgrOrBiz = data.mgrOrBiz;
        this.uploadConfig.formName = data.formName;
        this.uploadConfig.appId = data.appId;
        this.uploadConfig.nodeName = data.nodeName;
        this.uploadConfig.nodeId = data.nodeId;
        this.uploadConfig.id = data.id;
        this.uploadConfig.uuid = data.uuid;
        this.uploadConfig.parentId = data.parentId;
        let tag = decodeURIComponent(data.formData);

        //回调 - 组件内部方法
        this.$refs.bmFormDeaign.handlerCallback(tag);
      } else {
        this.$message.error("此节点无表单数据");
      }
    },
    /** 上传模板 */
    handlerUploadJson(configJson) {
      this.getUploadConfig = encodeURIComponent(JSON.stringify(configJson)); //需要转码
      this.uploadConfig.formData = encodeURIComponent(
        JSON.stringify(configJson)
      ); //需要转码
      if (this.tableData.length == 0) {
        this.handlerGetTree().then(() => {
          //点击上传模版的回调函数
          this.uploadDialog = !this.uploadDialog;
        });
      } else {
        //点击上传模版的回调函数
        this.uploadDialog = !this.uploadDialog;
      }
    },
    handlerNodeClickUpload(data, node) {
      this.uploadConfig.mgrOrBiz = data.mgrOrBiz;
      this.uploadConfig.formType = "";
      this.uploadConfig.formName = "";
      this.uploadConfig.appId = "";
      this.uploadConfig.nodeName = "";
      this.uploadConfig.nodeId = "";
      this.uploadConfig.uuid = "";
      this.uploadConfig.id = "";
      this.uploadConfig.parentId = "";
      this.uploadConfig.formData = "";

      switch (node.level) {
        case 1:
          this.uploadConfig.parentId = data.id;
          break;
        case 2:
          this.uploadConfig.parentId = data.id;
          this.uploadConfig.formData = this.getUploadConfig;
          break;
        default:
          this.uploadConfig.formType = data.formType;
          this.uploadConfig.formName = data.formName;
          this.uploadConfig.appId = data.appId;
          this.uploadConfig.nodeName = data.nodeName;
          this.uploadConfig.nodeId = data.nodeId;
          this.uploadConfig.uuid = data.uuid;
          this.uploadConfig.id = data.id;
          this.uploadConfig.parentId = data.parentId;
          this.uploadConfig.formData = this.getUploadConfig;
          break;
      }
    },
    handlerUpload() {
      //上传模版ajax
      this.loading = true;
      this.$refs.uploadConfigForm.validate((val) => {
        if (val) {
          request({
            method: "post",
            url: "api/rem-registrationmgrweb/otc-flow/workflowform/submit",
            data: this.uploadConfig,
          })
            .then((res) => {
              this.loading = false;
              this.uploadDialog = false;
              if (res.data.code == 200) {
                this.$message.info("提交成功");
              } else {
                this.$message.error("提交失败");
              }
            })
            .catch(() => {
              this.loading = false;
              this.uploadDialog = false;
              this.$message.error("提交失败");
            });
        } else {
          this.loading = false;
          this.$message.warning("表单校验失败！");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.el-table .children-row {
  background: #f0f9eb;
}
</style>